<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>移动端抽奖 &middot; pfan</title>
        <meta name="description" content="抽奖类型  圆形抽奖 方形抽奖 老虎机 刮刮卡  圆形抽奖 代码如下：
// prefix补全 	var CSSTransform = (function() { var _elementStyle = document.createElement(&#34;div&#34;).style; var _vendor = (function() { var vendors = [&#34;t&#34;, &#34;webkitT&#34;, &#34;MozT&#34;, &#34;msT&#34;, &#34;OT&#34;], transform, i = 0, l = vendors.length; for (; i &lt; l; i&#43;&#43;) { transform = vendors[i] &#43; &#34;ransform&#34;; if (transform in _elementStyle) return vendors[i].substr(0, vendors[i].length - 1); } return false; })(); function _prefixStyle(style) { if (_vendor === false) return false; if (_vendor === &#34;&#34;) return style; return _vendor &#43; style.">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="generator" content="Hugo 0.73.0" />
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta property="og:title" content="移动端抽奖">
<meta property="og:description" content="抽奖类型  圆形抽奖 方形抽奖 老虎机 刮刮卡  圆形抽奖 代码如下：
// prefix补全 	var CSSTransform = (function() { var _elementStyle = document.createElement(&#34;div&#34;).style; var _vendor = (function() { var vendors = [&#34;t&#34;, &#34;webkitT&#34;, &#34;MozT&#34;, &#34;msT&#34;, &#34;OT&#34;], transform, i = 0, l = vendors.length; for (; i &lt; l; i&#43;&#43;) { transform = vendors[i] &#43; &#34;ransform&#34;; if (transform in _elementStyle) return vendors[i].substr(0, vendors[i].length - 1); } return false; })(); function _prefixStyle(style) { if (_vendor === false) return false; if (_vendor === &#34;&#34;) return style; return _vendor &#43; style.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.steps.info/2020/03/19/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%8A%BD%E5%A5%96/">
        <link rel="stylesheet" href="https://blog.steps.info/dist/site.css">
        <link rel="stylesheet" href="https://blog.steps.info/dist/syntax.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin,cyrillic-ext,latin-ext,cyrillic">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        
        
        
    </head>
    <body>
        
<script type="application/javascript">
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
var doNotTrack = (dnt == "1" || dnt == "yes");
if (!doNotTrack) {
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
	ga('create', 'XXX', 'auto');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
}
</script>


        <div id="wrapper">
            <header class="site-header">
                <div class="container">
                    <div class="site-title-wrapper">
                        
                            <h1 class="site-title">
                                <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                            </h1>
                        
                        <a class="button-square" href="https://blog.steps.info/index.xml"><i class="fa fa-rss"></i></a>
                        
                            <a class="button-square button-social hint--top" data-hint="Twitter" title="Twitter" href="https://twitter.com/pangel3" rel="me">
                                <i class="fa fa-twitter"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Gitlab" title="Gitlab" href="https://gitlab.com/funnypan" rel="me">
                                <i class="fa fa-gitlab"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Github" title="Github" href="https://github.com/RazzilDarkbrew" rel="me">
                                <i class="fa fa-github-alt"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Stack Overflow" title="Stack Overflow" href="https://stackoverflow.com/users/7784704/stepsinfo" rel="me">
                                <i class="fa fa-stack-overflow"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Email" title="Email" href="mailto:gemini0525@foxmail.com">
                                <i class="fa fa-envelope"></i>
                            </a>
                        
                    </div>

                    <ul class="site-nav">
                        
                    </ul>
                </div>
            </header>

            <div id="container">


<div class="container">
    <article class="post-container" itemscope="" itemtype="http://schema.org/BlogPosting">
        <header class="post-header">
    <h1 class="post-title" itemprop="name headline">移动端抽奖</h1>
    
    <p class="post-date">
        <span>Published <time datetime="2020-03-19" itemprop="datePublished">Thu, Mar 19, 2020</time></span>
        <span>by</span>
        <span itemscope="" itemprop="author" itemtype="https://schema.org/Person">
            <span itemprop="name">
                <a href="https://github.com/RazzilDarkbrew" itemprop="url" rel="author">pfan</a>
            </span>
        </span>
    </p>
    
        <p class="post-reading post-line">
            <span>Estimated reading time: 2 min</span>
        </p>
    
</header>

        <div class="post-content clearfix" itemprop="articleBody">
    

    <h2 id="抽奖类型">抽奖类型</h2>
<ul>
<li>圆形抽奖</li>
<li>方形抽奖</li>
<li>老虎机</li>
<li>刮刮卡</li>
</ul>
<h3 id="圆形抽奖">圆形抽奖</h3>
<p>代码如下：</p>
<div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">
	<span class="c1">// prefix补全
</span><span class="c1"></span>	<span class="kd">var</span> <span class="nx">CSSTransform</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
	    <span class="kd">var</span> <span class="nx">_elementStyle</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&#34;div&#34;</span><span class="p">).</span><span class="nx">style</span><span class="p">;</span>
	    <span class="kd">var</span> <span class="nx">_vendor</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
	        <span class="kd">var</span> <span class="nx">vendors</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;t&#34;</span><span class="p">,</span> <span class="s2">&#34;webkitT&#34;</span><span class="p">,</span> <span class="s2">&#34;MozT&#34;</span><span class="p">,</span> <span class="s2">&#34;msT&#34;</span><span class="p">,</span> <span class="s2">&#34;OT&#34;</span><span class="p">],</span>
	            <span class="nx">transform</span><span class="p">,</span>
	            <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
	            <span class="nx">l</span> <span class="o">=</span> <span class="nx">vendors</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
	        <span class="k">for</span> <span class="p">(;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">l</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
	            <span class="nx">transform</span> <span class="o">=</span> <span class="nx">vendors</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+</span> <span class="s2">&#34;ransform&#34;</span><span class="p">;</span>
	            <span class="k">if</span> <span class="p">(</span><span class="nx">transform</span> <span class="k">in</span> <span class="nx">_elementStyle</span><span class="p">)</span> <span class="k">return</span> <span class="nx">vendors</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">vendors</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span>
	        <span class="p">}</span>
	        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
	    <span class="p">})();</span>
	
	    <span class="kd">function</span> <span class="nx">_prefixStyle</span><span class="p">(</span><span class="nx">style</span><span class="p">)</span> <span class="p">{</span>
	        <span class="k">if</span> <span class="p">(</span><span class="nx">_vendor</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
	        <span class="k">if</span> <span class="p">(</span><span class="nx">_vendor</span> <span class="o">===</span> <span class="s2">&#34;&#34;</span><span class="p">)</span> <span class="k">return</span> <span class="nx">style</span><span class="p">;</span>
	        <span class="k">return</span> <span class="nx">_vendor</span> <span class="o">+</span> <span class="nx">style</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">toUpperCase</span><span class="p">()</span> <span class="o">+</span> <span class="nx">style</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
	    <span class="p">}</span>
	    <span class="k">return</span> <span class="nx">_prefixStyle</span><span class="p">(</span><span class="s2">&#34;transform&#34;</span><span class="p">);</span>
	<span class="p">})();</span>

	<span class="c1">// 转盘旋转效果
</span><span class="c1"></span>	<span class="kd">var</span> <span class="nx">Lottery</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
	    <span class="k">this</span><span class="p">.</span><span class="nx">running</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
	    <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
	    <span class="cm">/*
</span><span class="cm">	    旋转转盘至指定位置
</span><span class="cm">	    参数：
</span><span class="cm">	    giftIndex: 礼物的索引（从0开始到数组.length - 1）
</span><span class="cm">	    endCallback：转盘旋转完成时的回调
</span><span class="cm">	    */</span>
	    <span class="k">this</span><span class="p">.</span><span class="nx">rotateToGift</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">giftIndex</span><span class="p">,</span> <span class="nx">endCallback</span><span class="p">)</span> <span class="p">{</span>
	        <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">endCallback</span><span class="p">)</span> <span class="o">!=</span> <span class="s2">&#34;function&#34;</span><span class="p">)</span>
	            <span class="k">return</span><span class="p">;</span>
	        <span class="k">if</span> <span class="p">(</span><span class="nx">giftIndex</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">giftIndex</span> <span class="o">&gt;</span> <span class="nx">CNST_GIFTS</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span>
	            <span class="k">return</span><span class="p">;</span>
	        <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">running</span><span class="p">)</span>
	            <span class="k">return</span><span class="p">;</span>
	        <span class="k">this</span><span class="p">.</span><span class="nx">running</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
	        <span class="kd">var</span> <span class="nx">degToRotate</span> <span class="o">=</span> <span class="p">((</span><span class="nx">giftIndex</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="mi">45</span><span class="p">)</span> <span class="o">+</span> <span class="p">(</span><span class="mi">360</span> <span class="o">*</span> <span class="mi">3</span><span class="p">)</span> <span class="o">-</span> <span class="mf">22.5</span><span class="p">;</span> <span class="c1">//最少转3圈
</span><span class="c1"></span>	        <span class="kd">var</span> <span class="nx">rotatedDeg</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
	        <span class="kd">var</span> <span class="nx">speed</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span> <span class="c1">//deg
</span><span class="c1"></span>	        <span class="kd">var</span> <span class="nx">speedRatio</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
	        <span class="kd">var</span> <span class="nx">_this</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
	
	        <span class="kd">function</span> <span class="nx">r</span><span class="p">()</span> <span class="p">{</span>
	            <span class="nx">_this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">[</span><span class="nx">CSSTransform</span><span class="p">]</span> <span class="o">=</span> <span class="s2">&#34;rotate(&#34;</span> <span class="o">+</span> <span class="p">(</span><span class="o">-</span><span class="nx">rotatedDeg</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34;deg)&#34;</span><span class="p">;</span>
	            <span class="nx">rotatedDeg</span> <span class="o">+=</span> <span class="p">(</span><span class="nx">speed</span> <span class="o">*</span> <span class="nx">speedRatio</span><span class="p">);</span>
	            <span class="k">if</span> <span class="p">(</span><span class="nx">rotatedDeg</span> <span class="o">+</span> <span class="mi">180</span> <span class="o">&gt;=</span> <span class="nx">degToRotate</span><span class="p">)</span> <span class="c1">//开始减速
</span><span class="c1"></span>	                <span class="nx">speedRatio</span> <span class="o">=</span> <span class="p">(</span><span class="nx">degToRotate</span> <span class="o">-</span> <span class="nx">rotatedDeg</span><span class="p">)</span> <span class="o">/</span> <span class="mi">180</span><span class="p">;</span>
	            <span class="k">if</span> <span class="p">(</span><span class="nx">rotatedDeg</span> <span class="o">&gt;=</span> <span class="nx">degToRotate</span> <span class="o">-</span> <span class="mf">0.5</span><span class="p">)</span> <span class="p">{</span>
	                <span class="nx">rotatedDeg</span> <span class="o">=</span> <span class="nx">degToRotate</span><span class="p">;</span>
	                <span class="nx">_this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">[</span><span class="nx">CSSTransform</span><span class="p">]</span> <span class="o">=</span> <span class="s2">&#34;rotate(&#34;</span> <span class="o">+</span> <span class="p">(</span><span class="o">-</span><span class="nx">rotatedDeg</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34;deg)&#34;</span><span class="p">;</span>
	                <span class="nx">_this</span><span class="p">.</span><span class="nx">running</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
	                <span class="nx">endCallback</span><span class="p">();</span>
	            <span class="p">}</span> <span class="k">else</span>
	                <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="mi">1000</span> <span class="o">/</span> <span class="mi">24</span><span class="p">);</span>
	        <span class="p">};</span>
	        <span class="nx">r</span><span class="p">();</span>
	    <span class="p">};</span>
	<span class="p">};</span>
</code></pre></div><p><strong>使用方法：</strong></p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;lottery&#34;</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;lottery-bg&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;btnStart&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;button start&#34;</span> <span class="na">onClick</span><span class="o">=</span><span class="s">&#34;startLottery()&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

</code></pre></div><p>调用方法：</p>
<div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">
<span class="kd">var</span> <span class="nx">myLottery</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Lottery</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.lottery .lottery-bg&#34;</span><span class="p">));</span><span class="c1">//初始化转盘
</span><span class="c1"></span><span class="nx">myLottery</span><span class="p">.</span><span class="nx">rotateToGift</span><span class="p">(</span><span class="nx">giftIndex</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
	    <span class="c1">//giftIndex为后端接口下发的奖品ID，function为回调函数
</span><span class="c1"></span><span class="p">}</span>
</code></pre></div><p>待续</p>

</div>

        <footer class="post-footer clearfix">
    
        <p class="post-tags">
            <span>Tagged:</span>
            
            
                <a href="/tags/translate/">translate</a>
            
        </p>
    

    <div class="share">
        
            <a class="icon-twitter" href="https://twitter.com/share?text=%e7%a7%bb%e5%8a%a8%e7%ab%af%e6%8a%bd%e5%a5%96&url=https%3a%2f%2fblog.steps.info%2f2020%2f03%2f19%2f%25E7%25A7%25BB%25E5%258A%25A8%25E7%25AB%25AF%25E6%258A%25BD%25E5%25A5%2596%2f"
                onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                <i class="fa fa-twitter"></i>
                <span class="hidden">Twitter</span>
            </a>
        

        
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fblog.steps.info%2f2020%2f03%2f19%2f%25E7%25A7%25BB%25E5%258A%25A8%25E7%25AB%25AF%25E6%258A%25BD%25E5%25A5%2596%2f"
                onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
                <i class="fa fa-facebook"></i>
                <span class="hidden">Facebook</span>
            </a>
        

        
            <a class="icon-google-plus" href="https://plus.google.com/share?url=https%3a%2f%2fblog.steps.info%2f2020%2f03%2f19%2f%25E7%25A7%25BB%25E5%258A%25A8%25E7%25AB%25AF%25E6%258A%25BD%25E5%25A5%2596%2f"
              onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
              <i class="fa fa-google-plus"></i>
                <span class="hidden">Google+</span>
            </a>
        
        
    </div>
</footer>

        
    <div class="comments">
        
    </div>

    </article>
</div>

            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="site-title-wrapper">
                    <h1 class="site-title">
                        <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                    </h1>
                    <a class="button-square button-jump-top js-jump-top" href="#">
                        <i class="fa fa-angle-up"></i>
                    </a>
                </div>

                <p class="footer-copyright">
                    <span>&copy; 2020 / Powered by <a href="https://gohugo.io/">Hugo</a></span>
                </p>
                <p class="footer-copyright">
                    <span><a href="https://github.com/roryg/ghostwriter">Ghostwriter theme</a> By <a href="http://jollygoodthemes.com">JollyGoodThemes</a></span>
                    <span>/ <a href="https://github.com/jbub/ghostwriter">Ported</a> to Hugo By <a href="https://github.com/jbub">jbub</a></span>
                </p>
            </div>
        </footer>

        <script src="https://blog.steps.info/js/jquery-1.11.3.min.js"></script>
        <script src="https://blog.steps.info/js/jquery.fitvids.js"></script>
        <script src="https://blog.steps.info/js/scripts.js"></script>
    </body>
</html>

